<!DOCTYPE html>
<html>
<head>
	<title>网页制作辅助工具-jQuery标尺参考线插件</title>
	<meta charset="utf-8">
	<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/ruler.css" type="text/css" />
	<style type="text/css">
	html,body{ width:100%; }
	body,h1{ margin:0px;padding:0px; }
	.head{ width:100%;height: 200px;background:#eee;border-bottom: 0px #333 solid;  }
	.head h1{ line-height: 200px; }
	.main{ width:1100px;height:;/*background:red;*/margin:50px auto;position: relative; }
	</style>
</head>
<body>
	<div class="head">
		<h1 class="text-center text-primary">网页制作辅助工具-jQuery标尺参考线插件</h1>
	</div>
	<div class="progress">
	  <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
	  </div>
	</div>

	<!--main-->
	<div class="main">
	<div class="alert alert-warning" role="alert">
		<p>注：本插件整理至 <a href="http://www.zhangxinxu.com/wordpress/?p=1002">网页制作辅助工具-jQuery标尺参考线插件。</a></p>
		<p>这里的每一小格代表5px，100即为100px，200即为200px。整个参考线的z-index默认被设置为1000，所以当你打开参考线(r键)后，参考线下面的内容是不可选取或点击的.</p>
		<p>经测试jquery版本要在1.8以下才能正常使用</p>
		<p>js地址：<a href="http://www.zhangxinxu.com/study/js/jquery.zxxPageRuler.1.1.js">http://www.zhangxinxu.com/study/js/jquery.zxxPageRuler.1.1.js</a>。css地址：<a href="http://www.zhangxinxu.com/study/css/ruler.css">http://www.zhangxinxu.com/study/css/ruler.css</a>。demo包地址：<a href="http://www.zhangxinxu.com/study/down/pageRuler_by_zhangxinxu.zip">demo包地址</a></p>
	</div>
	<p>1、引入js和css后即可使用，快捷键操作如下：<br/><img src="images/key.png" alt=""></p>
	<p>2、可以直接调用来控制插件的方法：<br/><img src="images/rule.png" alt=""></p>
	<p>3、批量设置参考线：<br/><img src="images/rule_line.png" alt=""></p>
	<p>4、由于IE6不支持position:fixed属性，所以，IE6下的定位我使用了js，让其浏览器窗口显示，由于脚本本身的原因，所以IE6浏览器下，页面滚动时，标尺以及参考线会晃动。</p>
	</div>
	<script src="http://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.zxxPageRuler.1.1.js"></script>
</body>
</html>